<template>
	<view class="device-item" v-if="detail">
		<view class="checkbox-wrapper" :class="detail.active?'checked':''">
			<checkbox value="cb" :checked="detail.active" @click="change" />
		</view>
		<view class="device-info">
			<view class="device-number">
				{{detail.model_sn}}
			</view>
			<view class="goods-name">
				{{detail.product_name}}
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, defineEmits } from 'vue';
	import { IDevice } from './types';

	interface IProps {
		detail : IDevice | null;
	}

	const props = withDefaults(defineProps<IProps>(), {
		detail: null
	})

	const emit = defineEmits(['changeDevieItemActive']);

	const change = () => {
		emit('changeDevieItemActive', props.detail!);
	}
</script>

<style scoped lang="scss">
	@import "./deviceItem.scss";
</style>